<template>
    <el-form :model="addList" class="demo-form-inline" label-position="right" label-width="50" ref="ruleFormRef"
      :rules="rules">
      <el-form-item label="id" prop="id">
        <el-input v-model="addList.id" placeholder="请输入id" clearable />
      </el-form-item>
      <el-form-item label="name" prop="name">
        <el-input v-model="addList.name" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="specs" prop="specs">
        <el-input v-model="addList.specs" placeholder="请输入规格" clearable />
      </el-form-item>
      <el-form-item label="price" prop="price">
        <el-input v-model="addList.price" placeholder="请输入价格" clearable />
      </el-form-item>
      <el-form-item label="num" prop="num">
        <el-input v-model="addList.num" placeholder="请输入数量" clearable />
      </el-form-item>
      <el-form-item label="">
        <el-button @click="sub" type="primary">提交</el-button>
        <el-button @click="reset()" type="primary">清空</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  const addList = reactive({
    id: null,
    name: '',
    specs: [],
    price: '',
    num: ''
  })
  const rules = reactive({
    id: [{ required: true, message: '你填了吗', trigger: 'blur' }, { min: 1, max: 3, message: '你输入的长度有误', trigger: 'blur' }],
    num: [{ required: true, message: '你填了吗', trigger: 'blur' }, { min: 3, max: 5, message: '你输入的长度有误', trigger: 'blur' }],
    name: [{ required: true, message: '你填了吗', trigger: 'blur' }, { min: 1, max: 5, message: '你输入的长度有误', trigger: 'blur' }],
    price: [{ required: true, message: '你填了吗', trigger: 'blur' }, { min: 1, max: 5, message: '你输入的长度有误', trigger: 'blur' }],
    specs: [{ required: true, message: '你填了吗', trigger: 'blur' }, { min: 1, max: 5, message: '你输入的长度有误', trigger: 'blur' }]
  })
  function sub() {
    console.log('submit!')
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        alert('成功')
      } else {
        alert('失败')
      }
    })
  }
  const ruleFormRef = ref(null)
  function reset() {
    ruleFormRef.value.resetFields()
  }
  </script>
  
  <style>
  .demo-form-inline{
    margin-top: 20px;
  }
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  </style>
  